import * as React from 'react'; import { Badge } from '@aws-amplify/ui-react'; import { BadgePropControls } from './BadgePropControls'; import { useBadgeProps } from './useBadgeProps'; import { Demo } from '@/components/Demo'; import { demoState } from '@/utils/demoState'; const propsToCode = (badgeProps) => { return ( `<Badge` + (badgeProps.size ? `\n size=${JSON.stringify(badgeProps.size)}` : '') + (badgeProps.variation ? `\n variation=${JSON.stringify(badgeProps.variation)}` : '') + `> ${badgeProps.body} </Badge>` ); }; const defaultBadgeProps = { body: 'Badge', }; export const BadgeDemo = () => { const badgeProps = useBadgeProps( demoState.get(Badge.displayName) || defaultBadgeProps ); return ( <Demo code={propsToCode(badgeProps)} propControls={<BadgePropControls {...badgeProps} />} > <Badge size={badgeProps.size} variation={badgeProps.variation}> {badgeProps.body} </Badge> </Demo> ); };